import { useEffect, useRef, useState } from 'react';
import { BenchModelState, Link, useSelector, useDispatch, useStore } from 'umi';
import styles from './index.less';
import { Menu, Dropdown, Button, Modal, message, Popconfirm, Tooltip } from 'antd';
import * as echarts from 'echarts';
import CommonFooter from '@/components/CommonFooter'

export default function IndexPage() {
  const { benchArticleList, benchCommentList } = useSelector((state: { bench: BenchModelState }) => state.bench)
  let dispatch = useDispatch()
  // 文章
  useEffect(() => {
    dispatch({
      // 获取到module里面的article里面的getBenchArticle
      type: 'bench/getBenchArticle'
    })
  }, [])
  // 评论数据
  useEffect(() => {
    dispatch({
      // 获取到module里面的article里面的getBenchComment
      type: 'bench/getBenchComment'
    })
  }, [])

  const warp = useRef(null)
  // echarts图表
  useEffect(() => {
    let myChart = echarts.init((warp.current! as HTMLElement));
    // 监听页面的 window.onresize 事件获取浏览器大小改变的事件，
    // 然后调用 echartsInstance.resize 改变图表的大小。
    window.onresize = function () {  // 图表响应式
      myChart.resize();
    };
    myChart.setOption({
      title: {
        text: '每周用户访问指标',
        left: '70px'
      },
      legend: {},
      tooltip: {},
      dataset: {
        // 用 dimensions 指定了维度的顺序。直角坐标系中，如果 X 轴 type 为 category，
        // 默认把第一个维度映射到 X 轴上，后面维度映射到 Y 轴上。
        // 如果不指定 dimensions，也可以通过指定 series.encode
        dimensions: ['product', '评论数', '访问量'],
        source: [
          { product: 'Mon', '评论数': 120, '访问量': 350 },
          { product: 'Tue', '评论数': 200, '访问量': 290 },
          { product: 'Web', '评论数': 150, '访问量': 350 },
          { product: 'Thu', '评论数': 89, '访问量': 112 },
          { product: 'Fir', '评论数': 70, '访问量': 100 },
          { product: 'Sat', '评论数': 110, '访问量': 120 },
          { product: 'Sun', '评论数': 130, '访问量': 160 },
        ],
      },
      color: ["#C23531", "#2F4554"],
      xAxis: { type: 'category' },
      yAxis: {},
      series: [{ type: 'bar' }, { type: 'line' },] //{ type: 'pie' } 饼图
    })
  }, [])

  function Pass(id: string) {
    console.log(id);
    dispatch({
      // 获取到module里面的article里面的getBenchComment
      type: 'bench/gitbenchCommentDetails',
      payload: {
        id
      }
    })
  }
  // 通过
  async function Passtrue(id: string) {
    await dispatch({
      type: 'bench/getbenchCommentDetails',
      payload: {
        id,
        data: { pass: true }
      },
    })
    await dispatch({
      type: 'bench/getBenchComment'
    })
    message.success('评论已通过')
  }
  // 拒绝
  async function Passfalse(id: string) {
    await dispatch({
      type: 'bench/getbenchCommentDetails',
      payload: {
        id,
        data: { pass: false }
      },
    })
    await dispatch({
      type: 'bench/getBenchComment'
    })
    message.success('评论已拒绝')
  };
  // 回复
  // 获取文本内容
  let replytext = useRef<HTMLTextAreaElement>(null)
  // 回复按钮
  const [isModalVisible, setIsModalVisible] = useState(false);
  function showModal() {
    setIsModalVisible(true);
  };
  // 回复确认按钮
  async function handleOk() {
    let textvalue = replytext.current?.value
    setIsModalVisible(false);
    await dispatch({
      type: 'bench/getbenchCommentReply',
      payload: {
        content: textvalue,
        createByAdmin: true,
        email: "bwbjwz@163.com",
        hostId: +new Date(),
        name: "admin",
        parentCommentId: +new Date(),
        replyUserEmail: "bwbjwz@163.com",
        replyUserName: "admin",
      }
    })
    await dispatch({
      type: 'bench/getBenchComment'
    })
    message.success('评论已回复')
  };
  // 回复取消按钮
  const handleCancel = () => {
    setIsModalVisible(false);
  };
  // 删除 
  async function DeleteOK(id: string) {
    console.log(id);
    await dispatch({
      type: 'bench/getbenchCommentDelete',
      payload: {
        id
      }
    })
    // 更新数据
    await dispatch({
      type: 'bench/getBenchComment'
    })
  }
  const text = <div className={styles.textPrompt}><iframe className={styles.iframe} src='https://creationadmin.shbwyz.com/article/editor/creation.shbwyz.com/article/f77ada6c-c858-48e1-8df1-a58532acdf72'></iframe></div>;

  return (
    <div className={styles.IndexPage}>
      <div className={styles.bench}>
        <div className={styles.benchitem}>
          工作台
        </div>
        <div className={styles.benchitem2}>
          <h1>您好,admin</h1>
        </div>
        <div className={styles.benchitem3}>
          你的角色：<span>管理者</span>
        </div>
      </div>
      <div className={styles.contents}>
        {/* 面板导航 */}
        <div className={styles.echarts}>
          <div className={styles.echartsNav}>面板导航</div>
          <div className={styles.echartsBox} ref={warp}></div>
        </div>
        {/* 快速导航 */}
        <div className={styles.speedNav}>
          <div className={styles.speedNavitem}>快速导航</div>
          <div className={styles.speedNavList}>
            <Link to={'/article'}>文章管理</Link>
            <Link to={'/comment'}>评论管理</Link>
            <Link to={'/file'}>文件管理</Link>
            <Link to={'/user'}>用户管理</Link>
            <Link to={'/view'}>访问管理</Link>
            <Link to={'/setting'}>系统设置</Link>
          </div>
        </div>
        {/* 最新文章 */}
        <div className={styles.latestArticle}>
          <div className={styles.latest}>
            <span>最新文章</span>
            <Link to={'/article'}>全部文章</Link>
          </div>
          <div className={styles.latestImg}>
            {
              benchArticleList.map((item, index) => {
                return <Link to={`/article/editor/${item.id}`} className={styles.latestImgs} key={index}>
                  <img src={item.cover} alt="" />
                  <p>{item.title}</p>
                </Link>
              })
            }
          </div>
        </div>
        {/* 弹出框 */}
        <Modal destroyOnClose={true} cancelText='取消' okText='回复' title="回复评论" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel}>
          <textarea ref={replytext} className={styles.inp} placeholder='支持 markdown' name="" id="" />
        </Modal>
        {/* 最新 评论 */}
        <div className={styles.latestComment}>
          <div className={styles.Comment}>
            <span>最新评论</span>
            <Link to={'/comment'}>全部评论</Link>
          </div>
          <div className={styles.allComment}>
            <ul>
              {
                benchCommentList.map((item, index) => {
                  return <li key={item.id}>
                    <div className={styles.content}>
                      <div>{item.name} 在
                        <Tooltip placement="right" className={styles.Tooptip} title={text} color={"#fff"}>
                          <Button>文章</Button>
                        </Tooltip>  评论
                        <Dropdown overlay={<Menu>
                          <Menu.Item className={styles.detailes}>
                            评论详情-原始内容
                          </Menu.Item>
                          <Menu.Item className={styles.text}>
                            <span>{item.content}</span>
                          </Menu.Item>
                        </Menu>} placement="top" arrow={{ pointAtCenter: true }}>
                          {/* {item.content} 评论的内容 */}
                          <Button>查看内容</Button>
                        </Dropdown>
                        {item.pass === true ? <span><i className={styles.green}></i>通过</span> : <span><i className={styles.yellow}></i>未通过</span>} </div>
                      <div>
                        <span className={styles.links} onClick={() => {
                          Pass(item.id)
                          Passtrue(item.id)
                        }}>通过</span>
                        <span className={styles.shu}> | </span>
                        <span className={styles.links} onClick={() => {
                          Passfalse(item.id)
                        }}>拒绝</span>
                        <span className={styles.shu}> | </span>
                        <Button type="primary" className={styles.links} onClick={showModal}>
                          <span className={styles.linkitem}>回复</span>
                        </Button>
                        {/* <span className={styles.links}>回复</span> */}
                        <span className={styles.shu}> | </span>
                        <Popconfirm title="确认删除这个评论？" onConfirm={() => { DeleteOK(item.id) }} okText="确认" cancelText="取消">
                          <span className={styles.links}>删除</span>
                        </Popconfirm>
                      </div>
                    </div>
                  </li>
                })
              }
            </ul>
          </div>
        </div>
        <CommonFooter></CommonFooter>
      </div>
    </div>
  );
}